<template>
  <canvas ref="canvas" width="500" height="500"></canvas>
</template>

<script setup>
import { onMounted, ref } from "vue";

import imgSrc from "../assets/maps/xtark_test.png";

const canvas = ref(); //获取画布
let ctx = ref();

onMounted(() => {
  ctx = canvas.value.getContext("2d");
  ctx.fillStyle = "#ccc";
  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);

  let image = new Image();
  //   image.src = "../assets/maps/xtark_test.png";
  image.src = imgSrc;
  setTimeout(() => {
    // 绘制图片
    ctx.drawImage(image, 0, 0);
  }, 10);
  //   image.onload = function () {
  //     console.log("img加载完毕");
  //     ctx.drawImage(image, 0, 0, 500, 500);
  //   };

  //   drawStrokeRect();
  //   drawFillRect();
});

const drawStrokeRect = () => {
  ctx.rect(100, 100, 100, 100);
  ctx.strokeStyle = "green";
  ctx.stroke();
};

const drawFillRect = () => {
  ctx.rect(300, 100, 100, 100);
  ctx.fillStyle = "blue";
  ctx.fill();
};
</script>

<style scoped>
canvas {
  /* width: 100%;
  height: 100%; */
  border: 1px solid;
}
</style>
